<template>
  <div class="app-container">
    <div class="section-box">
      <div class="section-title">{{$t('merchant.merchantDetailPayin')}}</div>
      <el-table v-loading="payinLoading"
        :data="payinData">
        <el-table-column :label="$t('merchant.transDate')"
          align="center"
          prop="transDate"
          min-width="160" />
        <el-table-column :label="$t('merchant.transCode')"
          align="center"
          prop="transCode"
          min-width="160"
          show-overflow-tooltip />
        <el-table-column :label="$t('merchant.exchangeName')"
          align="center"
          prop="exchangeName"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column :label="$t('merchant.fromAccountNo')"
          align="center"
          prop="fromAccountName"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column :label="$t('merchant.toBankName')"
          align="center"
          prop="toBankName"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column :label="$t('merchant.toAccountNo')"
          align="center"
          prop="toAccountNo"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column :label="$t('merchant.toAccountName')"
          align="center"
          prop="toAccountName"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column :label="$t('merchant.AmountINR')"
          align="center"
          prop="amount"
          min-width="160" />
        <el-table-column :label="$t('merchant.rate')"
          align="center"
          prop="rate"
          min-width="120" />
        <el-table-column :label="$t('merchant.AmountU')"
          align="center"
          prop="uAmount"
          min-width="160" />
        <el-table-column :label="$t('merchant.status')"
          align="center"
          prop="status"
          min-width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.transfer_status"
              :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="payinTotal > 0"
        :total="payinTotal"
        :page.sync="payinParams.pageNum"
        :limit.sync="payinParams.pageSize"
        @pagination="getPayinData" />
    </div>

    <div class="section-box">
      <div class="section-title">{{$t('merchant.merchantDetailPayout')}}</div>
      <el-table v-loading="payoutLoadig"
        :data="payoutData">
        <el-table-column :label="$t('merchant.transDate')"
          align="center"
          prop="createTime"
          min-width="160" />
        <el-table-column :label="$t('merchant.exchangeName')"
          align="center"
          prop="exchangeName"
          min-width="160"
          show-overflow-tooltip />
        <el-table-column :label="$t('merchant.userName')"
          align="center"
          prop="userName"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column :label="$t('merchant.accountName')"
          align="center"
          prop="accountName"
          :show-overflow-tooltip="true"
          min-width="160" />
        <el-table-column :label="$t('merchant.AmountU')"
          align="center"
          prop="amount"
          min-width="160" />
        <el-table-column :label="$t('merchant.transStatus')"
          align="center"
          prop="status"
          min-width="120">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.transfer_result_status"
              :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="payoutTotal > 0"
        :total="payoutTotal"
        :page.sync="payoutParams.pageNum"
        :limit.sync="payoutParams.pageSize"
        @pagination="getPayoutData" />
    </div>
  </div>
</template>

<script>
import {
  transRecordList,
  uCoinRecordList,
} from "@/api/overview/merchant.js";

export default {
  name: 'merchantDetail',
  dicts: ["transfer_status", 'transfer_result_status'],
  data () {
    return {
      payinData: [],
      payinLoading: false,
      payinParams: {},
      payinTotal: 0,

      payoutData: [],
      payoutLoadig: false,
      payoutParams: {},
      payoutTotal: 0
    }
  },
  watch: {
    '$route.query.refreshTime' (newValue) {
      if (newValue && this.$route.name == 'merchantDetail') {
        this.initLoad()
      }
    },
  },
  created () {
    this.initLoad()
  },
  methods: {
    initLoad () {
      let query = this.$route.query
      this.payinParams = {
        pageNum: 1,
        pageSize: 10,
        status: '1',
        exchangeId: query.exchangeId,
        transDate: query.transDate,
      }
      this.payoutParams = {
        pageNum: 1,
        pageSize: 10,
        exchangeId: query.exchangeId,
        startTime: query.startDate ? `${query.startDate} 00:00:00` : '',
        endTime: query.endDate ? `${query.endDate} 23:59:59` : '',
        recordType: 'payin'
      }
      this.getPayinData()
      this.getPayoutData()
    },
    getPayinData () {
      this.payinLoading = true;
      transRecordList(this.payinParams).then(
        (response) => {
          this.payinData = response.rows;
          this.payinTotal = response.total;
          this.payinLoading = false;
        }
      );
    },
    getPayoutData () {
      this.payoutLoadig = true;
      uCoinRecordList(this.payoutParams).then(
        (response) => {
          this.payoutData = response.rows;
          this.payoutTotal = response.total;
          this.payoutLoadig = false;
        }
      );
    }
  }
}
</script>

<style lang="scss" scoped>
.section-box {
  background-color: #fff;
  margin-bottom: 15px;
  padding: 20px;
  .section-title {
    font-size: 18px;
    color: #606266;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
</style>
